<template>
  <div class="site-containner">
    <div class="app-container">
      <el-row>
        <el-col :span="24">
          <div class="outMore">
            <div class="dataTitle">
              记录详情
              <div class="returnIndex"><router-link :to="{path:'/monitor/components/records'}"><i class="el-icon-arrow-left titleIcon"></i>返回</router-link></div>
            </div>
          </div>
          <div>
            <div class="lookBody">
              <el-form :inline="true" class="addMessage" ref="form" :model="replaceData" label-width="90px">
                <el-form-item label="记录编号:">
                  <el-input class="readonlyMessage smallMessage" v-model="replaceData.record_id" readonly></el-input>
                </el-form-item>
                <el-form-item class="rightMessage" label="状态:">
                  <el-input class="readonlyMessage smallMessage" v-model="replaceData.status" readonly></el-input>
                </el-form-item>
                <el-form-item label="创建人:">
                  <el-input class="readonlyMessage smallMessage" v-model="replaceData.creator_user_name" readonly></el-input>
                </el-form-item>
                <el-form-item class="rightMessage" label="创建时间:">
                  <el-input class="readonlyMessage smallMessage" v-model="replaceData.creator_time" readonly></el-input>
                </el-form-item>
                <span style="position: absolute; margin: 15px 0px 0px 8px; color: red;">*</span>
                <el-form-item label="出厂编号:">
                  <el-input class="readonlyMessage smallMessage" v-model="replaceData.equip_cid" readonly></el-input>
                </el-form-item>
                <el-form-item class="rightMessage" label="设备名称:">
                  <el-input class="readonlyMessage smallMessage" v-model="replaceData.equip_name" readonly></el-input>
                </el-form-item>
                <span style="position: absolute; margin: 15px 0px 0px 8px; color: red;">*</span>
                <el-form-item label="配件编码:">
                  <el-input class="readonlyMessage smallMessage" v-model="replaceData.fittings_id" readonly></el-input>
                </el-form-item>
                <el-form-item class="rightMessage" label="机构:">
                  <el-input class="readonlyMessage smallMessage" v-model="replaceData.fittings_type" readonly></el-input>
                </el-form-item>
                <span style="position: absolute; margin: 15px 0px 0px 8px; color: red;">*</span>
                <el-form-item label="配件名称:">
                  <el-input class="readonlyMessage smallMessage" v-model="replaceData.fittings_name" readonly></el-input>
                </el-form-item>
                <el-form-item label="更换原因:">
                  <el-input class="readonlyMessage cityMessage" v-model="replaceData.update_reason" readonly></el-input>
                </el-form-item>
                <el-form-item label="新配件品牌:">
                  <el-input class="readonlyMessage smallMessage" v-model="replaceData.new_fittings_brand" readonly></el-input>
                </el-form-item>
                <el-form-item class="rightMessage" label="新配件型号:">
                  <el-input class="readonlyMessage smallMessage" v-model="replaceData.new_fittings_model" readonly></el-input>
                </el-form-item>
                <el-form-item label="序列号:">
                  <el-input class="readonlyMessage cityMessage" v-model="replaceData.new_fittings_num" readonly></el-input>
                </el-form-item>
                <el-form-item label="处理人:">
                  <el-input class="readonlyMessage smallMessage" v-model="replaceData.handle_user_name" readonly></el-input>
                </el-form-item>
                <el-form-item class="rightMessage" label="完成时间:">
                  <el-input class="readonlyMessage smallMessage" v-model="replaceData.finish_time" readonly></el-input>
                </el-form-item>
                <el-form-item class="pictureSize" label="附件:">
                  <img :src="picShow">
                </el-form-item>
              </el-form>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
  import axios from 'axios'
  export default {
    name: 'AdminSite',
    components: {
    },
    data() {
      return {
        picShow: '',
        replaceData: {
          record_id: '',
          status: '',
          creator_user_id: '',
          creator_user_name: '',
          creator_time: '',
          equip_cid: '',
          equip_name: '',
          fittings_id: '',
          fittings_name: '',
          fittings_type: '',
          update_reason: '',
          new_fittings_brand: '',
          new_fittings_model: '',
          new_fittings_num: '',
          handle_user_id: '',
          handle_user_name: '',
          finish_time: '',
          attachment: []
        },
        getReplaceData: {
          access_token: localStorage.getItem('access_token'),
          type: 'update_log_get_by_id',
          id: this.$route.query.id
        }
      }
    },
    created() {
      this.getReplace()
    },
    methods: {
      getReplace() {
        let pic = process.env.BASE_API
        axios.post('/fittings', this.getReplaceData, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.replaceData = res.data.data
          if (this.replaceData.status === 0) {
            this.replaceData.status = '未完成'
          } else {
            this.replaceData.status = '已完成'
          }
          if (this.replaceData.attachment[0].path) {
            this.picShow = pic + '/' + this.replaceData.attachment[0].path
          }
        })
          .catch(function(error) {
            console.log(error)
          })
      }
    }
  }
</script>
<style scoped>
  .site-containner{
    font-size: 16px;
    color: #25B6C7;
  }
  .outMore{
    height: 40px;
    padding-top: 2px;
    border-bottom: 1px solid #E0E0E0;
  }
  .dataTitle {
    padding-left: 5px;
    border-left: 5px solid #25B6C7;
    height: 16px;
    font-size: 16px;
    color: #323842;
  }
  .returnIndex {
    float: right;
    font-size: 14px;
    color: #25B6C7;
    cursor: pointer;
  }
  .lookBody{
    width: 100%;
    min-height: 500px;
    margin-top: 20px;
    padding: 0px 20px;
    border: 1px solid #E0E0E0;
    background-color: white;
  }
  /deep/ .textTitle {
    color: #323842;
    font-size: 14px;
    font-weight: bold;
    padding:20px 0px;
    border-bottom: 1px solid #E0E0E0;
  }
  /deep/ .addMessage {
    margin: 20px 0px;
    width: 735px;
  }
  /deep/ .el-form-item {
    margin-bottom: 10px;
    height: 30px;
  }
  /deep/ .el-input__inner {
    height: 30px;
  }
  /deep/ .smallMessage {
    width: 256px;
  }
  /deep/ .cityMessage {
    width: 631px;
  }
  /deep/ .coordinateMessage {
    width: 567px;
  }
  /deep/ .export {
    background: #fff;
    height: 30px;
    padding: 0px 15px;
    border: 1px solid #25B6C7;
    color: #25B6C7;
  }
  /deep/ .rightMessage {
    margin-left: 15px;
  }
  /deep/ .readonlyMessage > input{
    border:none;
  }
  /deep/ .el-icon-circle-close-outline:before {
    color: #D05133;
    font-size: 20px;
    font-weight: bold;
  }
  /deep/ .clear{
    padding: 6px 16px;
    background-color: #333B3D;
    border-color: #333B3D ;
    color: #fff;
    float: right;
    margin-top: 20px;
    margin-left: 10px;
  }
  /deep/ .indieWidth {
    padding: 6px 16px;
    float: right;
    border:1px solid #25B6C7;
    background: #25B6C7;
    margin-top: 20px;
  }
  /deep/ .relation {
    float: right;
    height: 30px;
    font-size: 14px;
    padding: 6px 16px;
    background: #25B6C7;
    border-color: #25B6C7;
  }
  /deep/ .moreLong > .el-form-item__content > .el-select > .el-input > input{
    width: 256px
  }
  /deep/ .el-table--border {
    margin-top: 20px;
  }
  /deep/ .el-table__header-wrapper {
    height: 40px;
  }
  /deep/ .el-table--border td, .el-table--border th, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
    border-right: 1px solid #E3E3E3;
    padding: 4px;
  }
  /deep/ .el-table--border th {
    padding: 3px;
  }
  /deep/ .el-table--striped .el-table__body tr.el-table__row--striped td {
    background: #F0F2F7;
  }
  /deep/ .pictureSize {
    height: auto;
  }
</style>
